<template>
  <div class="login">
    <div class="box">
      <h2>后台管理系统</h2>
      <!-- 账号 -->
      <el-input
        class="userName"
        prefix-icon="el-icon-user-solid"
        placeholder="请输入账号"
        v-model="userName"
      ></el-input>
      <!-- 密码 -->
      <el-input
        class="password"
        prefix-icon="el-icon-s-goods"
        placeholder="请输入密码"
        v-model="passWord"
        show-password
      ></el-input>
      <!-- 验证码 -->
      <el-input
        prefix-icon="el-icon-s-check"
        class="verification"
        v-model="verification"
        placeholder="验证码"
      ></el-input>
      <div class="random">
        <button @click="getRandomCode" class="randomCode">
          {{ randomCode }}
        </button>
      </div>
      <!-- 记住密码 -->
      <div class="remember">
        <input v-model="remember" type="checkbox" />记住密码
      </div>
      <!-- 登录 -->
      <div>
        <el-button class="loginBtn" type="primary" @click="loginBtn"
          >登录</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import * as API from "@/api/index";
export default {
  data() {
    return {
      userList: [], //数据库用户数据
      userName: "", //账号
      passWord: "", //密码
      verification: "", //验证码
      randomCode: "", //随机验证码
      remember: false, // 记住密码
    };
  },
  components: {},
  methods: {
    // 点击登录
    loginBtn() {
      let flag = false;
      if (this.userName === "") {
        this.$message("账号不能为空");
      } else if (this.passWord === "") {
        this.$message("密码不能为空");
      } else if (this.verification === "") {
        this.$message("验证码不能为空");
      } else if (this.verification !== this.randomCode) {
        this.$message("验证码不正确");
      } else {
        flag = true;
      }
      if (flag) {
        if (
          this.userName === this.userList[1].username &&
          this.passWord === this.userList[1].password
        ) {
          //登录成功
          console.log("登录成功");

          this.$router.push("/home");
          // console.log(this.$router.history);
          // 判断登录成功后是都勾选记住密码
          if (this.remember) {
            // 记住密码：将账和号密码保存
            this.setUser({
              id: 1,
              username: this.userName,
              password: this.passWord,
              remember: this.remember,
            });
          } else {
            // 不记住密码：只将账号保存
            this.setUser({
              id: 1,
              username: this.userName,
              password: "",
              remember: this.remember,
            });
          }
        } else {
          this.$message("账号密码不正确");
        }
      }
      // 当用户名、密码、验证码是 admin，勾选记住密码时直接登录
      if (
        this.userName === "admin" &&
        this.passWord === "admin" &&
        this.verification === "admin" &&
        this.verification
      ) {
        // 登录成功
        this.$router.history.push("/home");
      }
    },
    // 键盘事件
    keyboard(e) {
      // console.log(e.keyCode);
      if (e.keyCode === 13) {
        this.loginBtn();
      }
    },
    // 获取四位随机数
    getRandomCode() {
      this.randomCode = Math.random().toString(16).substring(2, 6);
    },
    setUser(obj) {
      API.setUser(obj); 
    },
  },
  mounted() {
    // 绑定键盘事件
    document.addEventListener("keydown", (e) => {
      this.keyboard(e);
    });
    // 获取用户
    API.getUser().then((res) => {
      console.log(res.user);
      this.userList = res.user;
      this.userName = res.user[0].username;
      this.passWord = res.user[0].password;
      this.remember = res.user[0].remember;
    });
    this.getRandomCode();
  },
};
</script>
<style scoped>
.login {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url("../../../static/image/login.jpg");
  background-position: 0; /*保持图片大小、位置不变*/
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover; /* 兼容Webkit内核浏览器如Chrome和Safari */
  -o-background-size: cover; /* 兼容Opera */
  zoom: 1;
}
.box {
  width: 300px;
  height: 300px;
  margin-top: calc(100vh / 2 - 150px);
  margin-left: calc(100vw / 2 - 150px);
  border-radius: 10px;
  background-color: #fff;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
}
.box h2 {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}
/* 账号 */

/* 密码 */
.passWord {
  width: 93%;
  height: 38px;
  line-height: 38px;
  padding: 0 10px;
  border-radius: 4px;
  border: 1px solid rgb(192, 216, 204);
  margin: 10px 0;
  color: rgb(192, 196, 204);
}
.passWord input {
  color: rgb(96, 98, 102);
  border: 0;
  outline: none;
}
.password {
  margin: 10px 0;
}

/* 验证码 */
.verification {
  width: 64%;
  margin-bottom: 10px;
}
/* 记住密码 */
.remember {
  margin-bottom: 10px;
}
.remember input {
  width: 16px;
  height: 16px;
  margin: 0 10px;
}
/* 登录按钮 */
.loginBtn {
  width: 100%;
}
.random {
  position: absolute;
  top: 172px;
  left: 250px;
}
.randomCode {
  width: 80px;
  height: 36px;
  outline: none;
  text-align: center;
}
/* input框placeholder颜色 */
input::-webkit-input-placeholder {
  color: rgb(192, 196, 204);
}
input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: rgb(192, 196, 204);
}
input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: rgb(192, 196, 204);
}
input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: rgb(192, 196, 204);
}
</style>